<template>
    <div>
        <div class="top">快腿后台管理系统</div>
        <div class="header">
            <el-menu :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal"  
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
                <el-menu-item index="1"><router-link to="/about">用户管理</router-link></el-menu-item>
                <el-menu-item index="2"><router-link to="/img">图片管理</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to="/deliver">送物管理</router-link></el-menu-item>
                <el-menu-item index="4"><router-link to="/queue">排队管理</router-link></el-menu-item>
                <el-menu-item index="5"><router-link to="/buy">买物管理</router-link></el-menu-item>
                <el-menu-item index="6"><router-link to="/draw">取物管理</router-link></el-menu-item>
                <el-menu-item index="7"><router-link to="/order">接单管理</router-link></el-menu-item>
                <el-menu-item index="8"><router-link to="/advice">意见管理</router-link></el-menu-item>
              </el-menu>
        </div>
        <el-divider></el-divider>
        <div class="title">
            <!--<div></div>-->
            
        </div>
        <div>
            <el-table
                :data="userData.slice((pageInfo.currentPage - 1) * pageInfo.pageSize, pageInfo.currentPage * pageInfo.pageSize)"
                style="width: 100%">
                <el-table-column label="购买类型" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货地址" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.address1 }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="备注地址" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.address2 }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="收货电话" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.tel }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="购买地址" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.address3 }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="备注地址" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.address4 }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="购买要求" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.yq }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="商品价格" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.price }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="购买时间" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.time }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="商品重量" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.weight }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="跑腿费" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.runprice }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="特殊要求" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.speacial }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteBuy(scope.$index)" id="delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :currentPage="pageInfo.currentPage" :page-size="pageInfo.pageSize" :total="pageInfo.pageTotal">
            </el-pagination>
        </div>
        <el-button type="primary"><router-link to="/">退出</router-link></el-button>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            //input1: "",
            //input2: "",
            //input3: "",
            //input4: "",
            activeIndex:'1',
            dialogVisible: false,
            tableData: [{}, {}, {}],
            userData: [{}],
            pageInfo: {
                currentPage: 1,
                pageSize: 5,
                pageTotal: 20
            }
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        show() {
            var file1 = document.getElementById("file1");
            var val = file1.value;
            var arr = val.split("\\");
            document.getElementsByClassName("filename")[0].innerHTML = arr[2];
        },
       //uploadDeliver() {
       //    let sub2 = document.querySelector("#sub2");
       //    let fileUser = { name: this.input1, phone: this.input2, mail: this.input3, address: this.input4 };
       //    sub2.onclick = function () {
       //        fetch("http://localhost:3000/upload2", {
       //            method: "POST",
       //            headers: {
       //                Authorization: localStorage["token"]
       //            },
       //            body: JSON.stringify(fileUser)
       //        }).then(res => res.json())
       //            .then(res => {
       //                console.log(res)
       //            })
       //    }
       //},
        getBuy() {
            axios.get('http://localhost:3000/getBuy').then(res => {
                console.log(res)
                if (res.status == 200) {
                    //console.log(res.data)
                    this.userData = res.data;

                }
            })
        },
        deleteBuy(index) {
            //let deleteButton = document.querySelector("#delete");
            console.log(this.userData[index].buyId)
            let fileUser = this.userData[index].buyId
            //deleteButton.onclick =
                //function () {
                    fetch("http://localhost:3000/deleteBuy", {
                        method: 'POST',
                        headers: {
                            Authorization: localStorage["token"]
                        },
                        body: JSON.stringify(fileUser)
                    }).then(res => res.json())
                        .then(res => {
                            console.log(res)
                            //console.log(res.data)
                        })
                //}
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
        },
        handleCurrentChange(val) {
            this.pageInfo.currentPage = val;
        },
    },
    mounted() {//条件完备
        //this.getList();
        this.getBuy();
    }
}
</script>
<style scoped>
.title {
    display: flex;
}
.top{
    height:50px;
    display: flex;
    font-size:large;
    background-color:/*#545c64;*/ #00b7ee;
    line-height: 50px;
}
.header {
    /*display: flex;*/
}

.header>div {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: #00b7ee;
    border: 1px solid black;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
}

.webuploader-pick {
    font-size: 18px;
    background: #00b7ee;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    color: #fff;
    display: inline-block;
    margin: 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.webuploader-pick {
    position: relative;
    display: inline-block;
    background: #00b7ee;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 10px 18px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
}

.webuploader-pick input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    padding: 10px 18px;
    cursor: pointer;
}

.webuploader-pick:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: red;
    text-decoration: none;
}
</style>